<template>
  <view>
    <view class="home">
      <view class="search-icon" @click="openSearch"
        ><text class="custom-icon custom-icon-shaixuan"></text
      ></view>
      <view class="charts-box">
        <qiun-data-charts
          type="mix"
          :chartData="chartData"
          :echartsH5="true"
          :echartsApp="true"
          background="none"
          :animation="false"
          v-if="showCharts"
        />
      </view>
    </view>
    <view class="top-view">
      <view class="thead">
        <view class="flex1 sort-li">时间</view>
        <view class="flex1 staff-li">订单数量</view>
        <view class="flex1 cutomer-li">订单金额</view>
      </view>
      <scroll-view class="cont-ul" scroll-y="true">
        <view class="flex" v-for="(item, index) in goods_list" :key="index">
          <view class="flex1 sort-li">{{ item.day }}</view>
          <view class="flex1 staff-li">{{ item.num }}</view>
          <view class="flex1 cutomer-li">{{ item.amount }}</view>
        </view>
        <u-loadmore
          :status="load_status"
          :load-text="loadText"
          @loadmore="loadmoreData"
        />
      </scroll-view>
    </view>
    <u-popup v-model="search_show" mode="right">
      <view class="search-pop">
        <view class="form-view">
          <u-form label-width="160rpx" label-position="left">
            <u-form-item label-position="top" label="下单日期">
              <view class="date-li">
                <picker mode="date" @change="bindDateStartChange">
                  <text class="date-li">{{
                    search_data.start
                      ? $u.timeFormat(search_data.start, "yyyy-mm-dd")
                      : "开始日期"
                  }}</text>
                </picker>
              </view>
              <view class="date-line">-</view>
              <view class="date-li">
                <picker mode="date" @change="bindDateEndChange">
                  <text class="date-li">{{
                    search_data.end
                      ? $u.timeFormat(search_data.end, "yyyy-mm-dd")
                      : "结束日期"
                  }}</text>
                </picker>
              </view>
            </u-form-item>
            <u-form-item label="订单状态">
              <view class="clearfix form-val" @click="month_show = true">
                <text class="float_left ellipsis">{{
                  search_data.orderStatus_name
                    ? search_data.orderStatus_name
                    : "请选择"
                }}</text>
                <view class="float_right">
                  <u-icon
                    :name="
                      !search_data.orderStatus
                        ? 'arrow-right'
                        : 'close-circle-fill'
                    "
                    size="28"
                    color="#999999"
                  ></u-icon>
                </view>
              </view>
            </u-form-item>
          </u-form>
        </view>
        <view class="search-btn">
          <view class="btn-li btn-reset" @click="clearValue()">重置</view>
          <view class="btn-li btn-submit" @click="searchConfirm">确定</view>
        </view>
      </view>
    </u-popup>
    <u-select
      v-model="month_show"
      :list="tabs_list"
      @confirm="confirm"
    ></u-select>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadText: {
        loadmore: "点击加载更多",
        loading: "努力加载中",
        nomore: "没有更多了",
      },
      page: 1,
      pageSize: 10,
      total: 0,
      type: 1,
      chartData: {
        categories: [],
        series: [],
      },
      goods_list: {},
      search_show: false,
      search_data: {
        start: "",
        end: "",
        orderStatus: "",
        orderStatus_name: "",
      },
      tabs_list: [
        {
          label: "待审核",
          value: 2,
        },
        {
          label: "待发货",
          value: 3,
        },
        {
          label: "待收货",
          value: 4,
        },
        {
          label: "已完成",
          value: 5,
        },
        {
          label: "已关闭",
          value: 6,
        },
      ],
      month_show: false,
      load_status: "nomore",
      showCharts: true, // 控制图表显示
    };
  },
  watch: {
    search_show(val) {
      if (val) {
        console.log("弹窗已打开");
        this.showCharts = false; // 隐藏图表
      } else {
        console.log("弹窗已关闭");
        this.showCharts = true; // 隐藏图表
      }
    },
  },
  onLoad() {
    this.order();
  },
  onPullDownRefresh() {
    this.page = 1;
    this.order();
  },
  methods: {
    loadmoreData() {
      if (this.total / this.pageSize > this.page) {
        this.page += 1;
        this.order();
      }
    },
    openSearch() {
      this.search_show = true;
    },
    order() {
      this.load_status = "loading";
      this.$u.api
        .order({
          page: this.page,
          pageSize: this.pageSize,
          startTime: this.search_data.start,
          endTime: this.search_data.end,
          type: this.type,
          orderStatus: this.search_data.orderStatus,
        })
        .then((res) => {
          uni.stopPullDownRefresh();
          if (this.page === 1) {
            this.goods_list = res.data;
          } else {
            this.goods_list = this.goods_list.concat(res.data);
          }
          this.total = res.pageTotal;
          this.load_status = this.$utils.loadStatus(
            this.page,
            this.pageSize,
            this.total
          );
          const timeData = [];
          const goodsNum = [];
          const goodsMoney = [];
          this.$nextTick(() => {
            res.data.forEach((value) => {
              const arr = value.day.split("-");
              timeData.push(arr[1] + "-" + arr[2]);
              goodsNum.push(Number(value.num));
              goodsMoney.push(Number(value.amount));
            });
            this.setChartData(timeData, goodsNum, goodsMoney);
          });
        });
    },
    setChartData(timeData, goodsNum, goodsMoney) {
      this.chartData = {
        categories: timeData,
        series: [
          {
            name: "订单数",
            data: goodsNum,
            // #ifdef APP-PLUS
            type: "bar",
            // #endif
            // #ifdef MP-WEIXIN
            type: "column",
            // #endif
            index: 1,
          },
          {
            name: "订单金额",
            data: goodsMoney,
            type: "line",
            style: "curve",
            // #ifdef APP-PLUS
            yAxisIndex: 1,
            smooth: true,
            // #endif
            disableLegend: true,
          },
        ],
      };
    },
    bindDateStartChange(e) {
      this.search_data.start = this.$utils.timeByTimestamp(
        e.detail.value + " 00:00:00"
      );
    },
    bindDateEndChange(e) {
      this.search_data.end = this.$utils.timeByTimestamp(
        e.detail.value + " 23:59:59"
      );
    },
    confirm(val) {
      this.search_data.orderStatus = val[0].value;
      this.search_data.orderStatus_name = val[0].label;
    },
    clearValue() {
      this.search_data = {
        start: "",
        end: "",
        orderStatus: "",
        orderStatus_name: "",
      };
      this.searchConfirm();
    },
    searchConfirm() {
      this.search_show = false;
      this.page = 1;
      this.order();
    },
  },
};
</script>

<style lang="scss" scoped>
.charts-box {
  width: 730rpx;
  /* #ifdef MP-WEIXIN */
  height: 480rpx;
  /* #endif */
  /* #ifdef APP-PLUS */
  height: 550rpx;
  /* #endif */
  margin: 0 auto;
}

.home {
  position: relative;
  /* #ifdef MP-WEIXIN */
  padding-top: 70rpx;

  /* #endif */
  .search-icon {
    position: absolute;
    width: 80rpx;
    text-align: center;
    z-index: 1;
    right: 0;
    top: 20rpx;
  }
}

.top-view {
  width: 100%;
  z-index: 9;

  .thead {
    line-height: 60rpx;
    height: 60rpx;
    font-size: 24rpx;
    background-color: #f5f5f5;
    display: flex;
    width: 100%;
  }

  .search-view {
    width: 100%;
  }
}

.flex1 {
  display: table-cell;
  text-align: center;
  position: relative;
  height: 100%;
  vertical-align: middle;

  &.staff-li {
    width: 33%;
  }

  &.sort-li {
    width: 33%;
  }

  &.cutomer-li {
    width: 33%;
  }
}

.cont-ul {
  height: calc(100vh - 620rpx);
  background-color: #ffffff;

  .flex {
    height: 70rpx;
  }
}

.flex {
  display: table;
  width: 750rpx;

  font-size: 24rpx;
}
.search-btn {
  .btn-reset {
    color: #fb5904 !important;
  }
  .btn-submit {
    background-color: #fb5904 !important;
  }
}
</style>
